<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./utils/flexible.js"></script>
    <link rel="stylesheet" href="./css/more0.css">
    <link rel="icon" href="assets/images/facicon.ico" type="image/x-icon" />


</head>
<style>
    #header {
        background-color: #1d6dff;
        text-align: center;
        position: relative;
    }

    #header .logo {
        font-size: 20px;
        color: #ffffff;
    }

    #header .logo a {
        position: absolute;

    }

    #header>h4 {
        display: inline-block;
        text-align: center;
        font-size: 20px;
        color: #ffffff;
        padding-left: 30px;
        margin: .6667rem 0;
    }

    #header .logo {
        display: block;
    }

    #header .app {
        position: absolute;
        right: .2667rem;
        padding: .1867rem .1867rem .08rem 0;
    }

    #header .app img {
        height: 34px;
    }

    .dv1 {
        font: 1rem/1rem "";
        margin-bottom: 1.0667rem;
        color: gray;
    }

    #product .container li {
        overflow: hidden;
        margin: .2667rem 0;
    }

    #product .container li .img {
        float: left;
        margin: 10px 0;
    }

    #product .container li .img img {
        width: 2.6667rem;
        margin-left: .2133rem;
    }

    #product .container li .right {
        float: left;
        width: 70%;
    }

    #product .container li .right h3 {
        margin: .2667rem;
    }

    #product .container li .right p {
        color: orangered;
        font-size: .48rem;
        margin: 0 0 .2667rem .4rem;
    }

    #product .container li .right>div {
        font-size: .32rem;
        margin-left: .2667rem;
    }

    .changePage {
        text-align: center;
        line-height: 40px;
        padding: 0 20px;
        padding-bottom: 10px;
    }

    .changePage .prev,
    .changePage .next {
        outline: none;
        border: none;
        border-radius: 5px;
        text-align: center;
        display: inline-block;
        width: 80px;
        height: 40px;
        line-height: 40px;
        background-image: linear-gradient(to bottom, #fff, #f4f4f4);
        border: 1px solid #cccccc;
    }

    .changePage .page {
        height: 40px;
        width: 90px;
        border: 1px solid #cccccc;
    }
</style>

<body>
    <header id="header">
        <div class="fl logo">
            <a href="./index.html">
                <img src="./assets/images/logo.png" alt="">
            </a>
        </div>
        <div class="app fr">
            <a href="">
                <img src="./assets/images/app.png" alt="">
            </a>
        </div>
    </header>

    <section id="search">
        <div class="searchbox">
            <input type="text" name="" placeholder="请输入你想比价的产品">
        </div>
        <div class="button">
            <button></button>
        </div>
    </section>

    <section id="product">
        <ul class="container">

        </ul>
    </section>

    <section class="changePage clearfix">
        <button class="prev fl" disabled="disabled" style="color: rgb(204, 204, 204);">上一页</button>

        <select value="" class="page">
            <option name="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                1/3
            </option>

            <option name="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                2/3
            </option>

            <option name="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                3/3
            </option>
        </select>
        <button class="next fr" style="color: rgb(51, 51, 51);">
            下一页
        </button>
    </section>


    <section id="footer">
        <div class="more">
            <a href="">
                更多优惠信息&gt;&gt;
            </a>
        </div>
        <div class="chart clearfix">
            <span class="chart_in fl">品牌排行</span>
            <span class="more fr">
                <img src="./assets/images/youjian.png" alt="">
            </span>
        </div>
        <div class="login">
            <div class="container">
                <div class="row">
                    <a href="">
                        <div class="col-xs-3">登入</div>
                    </a>
                    <a href="">
                        <div class="col-xs-4">注册</div>
                    </a>
                    <a href="">
                        <div class="col-xs-5">返回顶部</div>
                    </a>
                    <span></span>
                </div>
            </div>
            <div class="content_b">
                <p>
                    <a href="#">
                        手机APP下载
                    </a>
                    <a href="#">
                        万锋智慧商城手机版
                    </a>
                    -- 掌上比价平台
                </p>
                <p>
                    chst.vip:8081/crm </p>
            </div>
        </div>
    </section>
</body>

</html>

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./utils/utils.js"></script>
<script>

    function dynamic() {
        // let prev = document.querySelector('.changePage .prev')
        // let next = document.querySelector('.changePage .next')
        $('.changePage .next').on('click', function () {
            //console.log(777)

        })
    }

    function parcel() {
        let container = document.querySelector(".container")
        var i = location.href
        let reg = /(?<=\?).*/;
        let r = i.match(reg);
        let id = decodeURI(r)
        let obj = {};
        let itemArr = id.split(':');
        obj[itemArr[0]] = itemArr[1]

        function apply(fn) {
            let id = getQueryString('id');
            //console.log(id)
            fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${id}&pageid=1`)
                .then(body => body.json())
                .then(res => {
                    //console.log(res)
                    let el = ""
                    res.result.forEach(item => {
                        el += ` 
                    <li>
                        <div class="img">${item.productImg}</div>
                        <div class="right">
                            <h3>${item.productName} </h3>
                            <p>${item.productPrice}<p>
                            <div>
                                <span>${item.productQuote}</span>
                                <i>${item.productCom}</i>
                            </div>
                        </div>
                        </li>
                        `
                        container.innerHTML = el;
                    })
                })

        }

        apply()
        dynamic()
    }


    parcel()
</script>